<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '登录',
},
}
</route>
<template>
  <view class="overflow-hidden px-4 bg" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="top">
      <img class="img-left" src="@/static/app/custom-icon/小.png"/>
      <img class="img-right" src="@/static/images/大.png" alt=""/>
    </view>

    <view class="content">
      <view class="tips ml pt-4">您好，欢迎注册！</view>

      <view>
        <form action="/">
          <view
            class="flex flex-row flex-items-center"
            style="position: relative; margin-top: 2.56rem"
          >
            <label for="username" class="form-text">账号</label>
            <input
              class="form-input"
              name="username"
              type="text"
              placeholder="请输入您的账号"
              :modelValue="model.username"
              @update:modelValue="model.username = $event"
            />
            <view class="code flex flex-items-center justify-center">
              <wd-count-down
                v-show="startFlag"
                ref="countDown"
                :time="60000"
                millisecond
                :auto-start="false"
                format="ss秒"
                @finish="onFinish"
              ></wd-count-down>

              <text v-show="!startFlag" class="get-code-text" @click="start">获取验证码</text>
            </view>
          </view>
          <view class="flex flex-row flex-items-center" style="margin-top: 1.13rem">
            <label for="password" class="form-text">验证码</label>
            <input
              class="form-input"
              name="password"
              type="number"
              placeholder="请输入您的验证码"
              :modelValue="model.code"
              @update:modelValue="model.code = $event"
            />
          </view>

          <view class="form-item flex flex-row flex-items-center" style="margin-top: 1.13rem">
            <label for="password" class="form-text">密码</label>
            <input
              class="form-input"
              name="password"
              :password="showPassword"
              placeholder="请输入您的密码"
              v-model="model.password"
            />
            <view class="uni-icon" @click="changePassword">
              <img v-if="showPassword" src="@/static/app/custom-icon/眼睛-状态.png" alt=""/>
              <img v-else src="@/static/app/custom-icon/semiDesign-eye.png" alt=""/>
            </view>
          </view>

          <view class="form-item flex flex-row flex-items-center" style="margin-top: 1.13rem">
            <label for="password" class="form-text">确认密码</label>
            <input
              class="form-input"
              name="password"
              :password="showPassword"
              placeholder="请输入您的密码"
              v-model="model.repassword"
            />
            <view class="uni-icon" @click="changeRepassword">
              <img v-if="showRepassword" src="@/static/app/custom-icon/眼睛-状态.png" alt=""/>
              <img v-else src="@/static/app/custom-icon/semiDesign-eye.png" alt=""/>
            </view>
          </view>
        </form>
      </view>

      <view class="btn ma mt-12 flex flex-col justify-center">
        <text class="btn-text" @click="register">注册</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>

defineOptions({
  name: 'Register',
})

const showPassword = ref(true)

function changePassword() {
  showPassword.value = !showPassword.value
}

const showRepassword = ref(true)

function changeRepassword() {
  showRepassword.value = !showRepassword.value
}

const model = ref({
  username: '',
  code: '',
  password: '',
  repassword: '',
})

// 获取屏幕边界到安全区域距离
const {safeAreaInsets} = uni.getSystemInfoSync()
const countDown = ref<any>(null)

onLoad(() => {
  // uni.hideTabBar()
})

const startFlag = ref(false)

const onFinish = () => {
  startFlag.value = false
}

const start = () => {
  startFlag.value = true
  countDown.value.start()
}

function register() {
  if (model.value.username === '') {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
    })
    return
  }

  if (model.value.code === '') {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    })
    return
  }


  if (model.value.password === '') {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })

    if (model.value.repassword === '') {
      uni.showToast({
        title: '请输入密码',
        icon: 'none',
      })
      return
    }
    if (model.value.password !== model.value.repassword) {
      uni.showToast({
        title: '两次密码输入不一致',
        icon: 'none',
      })
      return
    }

    uni.showToast({
      title: '注册成功',
      icon: 'none',
    })

    uni.navigateTo({
      url: '/pages/home/home',
    })
  }
}
</script>

<style>
.bg {
  height: 1624rpx;
  background: rgb(76, 139, 254) 100%;
}

.content {
  position: absolute;
  top: 16.31rem;
  left: 0;
  width: 100%;
  height: 34.44rem;
  background-color: rgba(177, 224, 247, 0.67);
}

.img-left {
  position: absolute;
  top: 6.56rem;
  left: -0.56rem;
  width: 5.56rem;
}

.img-right {
  position: absolute;
  top: 3.25rem;
  right: -0.88rem;
  width: 18rem;
}

.tips {
  font-family: YSBiaoTiHei-regular;
  font-size: 1.75rem;
  line-height: 2.44rem;
  color: rgba(88, 143, 255, 1);
}

.form-text {
  width: 4.8rem;
  height: 1.56rem;
  margin-left: 1rem;
  font-family: SourceHanSansSC-bold;
  font-size: 1.13rem;
  line-height: 1.56rem;
  color: rgba(79, 139, 255, 1);
}

.form-input {
  width: 15rem;
  height: 2.5rem;
  padding-left: 0.63rem;
  margin-left: 0.88rem;
  line-height: 1.25rem;
  background-color: rgba(76, 139, 254, 0.3);
  border-radius: 3.13rem;
}

.form-bottom-tips {
  font-family: SourceHanSansSC-regular;
  font-size: 0.88rem;
}

.btn {
  width: 19.69rem;
  height: 3.44rem;
  font-family: PingFangSC-regular;
  font-size: 0.88rem;
  line-height: 1.25rem;
  color: rgba(16, 16, 16, 1);
  text-align: center;
  background: linear-gradient(
    265.93deg,
    rgba(90, 146, 254, 1) 22.86%,
    rgba(112, 207, 234, 1) 50.99%
  );
  border-radius: 1.75rem;
}

.btn-text {
  height: 2rem;
  font-family: SourceHanSansSC-regular;
  font-size: 1.38rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 1);
}

.divider {
  margin-top: 6.56rem;
}

.login-other-tips {
  font-family: SourceHanSansSC-regular;
  font-size: 0.88rem;
  line-height: 1.25rem;
  color: white;
}

.code {
  position: absolute;
  right: 60rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: white;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 15px;
}

.get-code-text {
  height: 1.06rem;
  font-family: SourceHanSansSC-regular;
  font-size: 0.75rem;
  line-height: 1.06rem;
  color: rgba(76, 139, 254, 0.8);
}

.form-item {
  position: relative;
}

.uni-icon {
  position: absolute;
  top: 0.5rem;
  right: 3rem;
}
</style>
